<template>
	<view>
		<view class='coupon-list' v-if="couponsList.length">
			<view class='item acea-row row-center-wrapper' v-for='(item, index) in couponsList' :key="index">
				<view class="couponsBox">
					<view class="title">预约人：{{ item.nickName }}</view>
					<view class="title">预约人电话：{{ item.mobile }}</view>
					<view class="title">预约时间：{{ item.appointmentDate }}  {{ item.appointmentTime }}</view>
				</view>
			</view>
		</view>
		<view class='loadingicon acea-row row-center-wrapper' v-if="couponsList.length">
			<text class='loading iconfont icon-jiazai' :hidden='loading == false'></text>{{ loadTitle }}
		</view>
		<!-- <view class='noCommodity' v-if="!couponsList.length">
			<view class='pictrue'>
				<image src='../../../static/images/noCoupon.png'></image>
			</view>
		</view> -->
		<home></home>
		<view v-if="couponsList.length == 0">
			<emptyPage title="暂无预约记录～"></emptyPage>
		</view>
	</view>
</template>
<script>
	import {
		getUserCoupons,
		getCoupons
	} from '@/api/api.js';
	import {
		getMakeRecord
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import home from '@/components/home';
	import emptyPage from '@/components/emptyPage.vue'

	export default {
		components: {
			home,emptyPage
		},
		filters: {

		},
		data() {
			return {
				couponsList: [],
				loading: false,
				loadend: false,
				loadTitle: '加载更多',
				pageSize: 10,
				pageNum: 1,
				navOn: 'null'
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV) {
					if (newV) {
						this.getUseCoupons();
					}
				},
				deep: true
			}
		},
		onLoad() {
			if (this.isLogin) {
				this.getUseCoupons();
			} else {
				toLogin();
			}
		},
		methods: {
			goIndex() {
				uni.switchTab({
					url: '/pages/platform/index'
				})
			},
			onNav(type) {
				this.navOn = type;
				this.couponsList = [];
				this.pageSize = 10;
				this.loadend = false;
				this.getUseCoupons();
			},
			getUseCoupons() {
				if (this.loadend) return;
				if (this.loading) return;
				const params = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					type: this.navOn
				};
				this.loading = true;
				getMakeRecord(params).then(res => {
					const list = res.data.records || [];
					this.loadend = list.length < this.pageNum;
					this.couponsList = this.couponsList.concat(list);
					this.loadTitle = this.loadend ? '我也是有底线的' : '加载更多';
					this.pageNum += 1;
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					this.loadTitle = '加载更多';
				});
			}
		},
		onReachBottom() {
			this.getUseCoupons();
		}
	}
</script>
<style lang="scss" scoped>
	.couponsBox {
		width: 702rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: auto;
		margin-bottom: 24rpx;

		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding:20rpx;
		.title {
			width: 100%;
			font-weight: 600;
			font-size: 26rpx;
			color: #000000;
			line-height: 32rpx;
			text-align: left;
		}
	}


	.coupon-list .item {
		margin-bottom: 46rpx;
	}

	.loadingicon {
		margin-top: 20rpx;
		color: #999999;
	}

	.noCommodity {
		margin-top: 300rpx;
		text-align: center;
	}
</style>